<!-- 查看与编辑-->
<template>
  <div>
    <a-drawer
        :title="title"
        :width="720"
        :maskClosable="false"
        :visible="visible"
        @close="onClose"
    >
      <a-form ref="form"  :model="form" :rules="rules"  layout="vertical" hide-required-mark>
        <a-row>
          <a-col :span="12">
            <a-form-item label="使用项目">
              <a-input placeholder="使用项目" disabled v-model="form.orgName" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="模块名称" prop="moduleName">
              <a-input placeholder="模块名称" v-bind="{disabled : viewMode}" v-model="form.moduleName" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="用途及所用部位" prop="userPart">
              <a-input placeholder="用途及所用部位" v-bind="{ disabled : viewMode}"  v-model="form.usePart" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="软硬件名称" prop="productName">
              <a-input  placeholder="软硬件名称" v-bind="{disabled : viewMode}"  v-model="form.productName" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="品牌" prop="brandName">
              <a-input placeholder="请输入品牌" v-bind="{disabled : viewMode}" v-model="form.brandName" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="资产属性" prop="assetNature">
              <a-select allowClear v-bind="{disabled : viewMode}" v-model="form.assetNature">
                <a-select-option :disabled="item.disable" v-for="item in prodProps" :key="item.value" :value="item.value">
                  {{item.label}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="规格型号及技术参数" prop="specification">
              <a-textarea  placeholder="规格型号及技术参数" v-bind="{disabled : viewMode}" v-model="form.specification" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="单位"  prop="unitName">
              <a-input placeholder="单位" v-bind="{disabled : viewMode}" v-model="form.unitName" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="数量" prop="productCount">
              <a-input placeholder="数量" v-bind="{disabled : viewMode}" v-model="form.productCount" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="单价" prop="unitPrice">
              <a-input placeholder="单价" v-bind="{disabled : viewMode}" v-model="form.unitPrice" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="总价">
              <a-input placeholder="总价" disabled v-model="form.totalPrice" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div
          :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >

        <a-button :loading="updateLoading" :style="{ marginRight: '8px' }" type="primary" @click="onConfirm">
          确认
        </a-button>
        <a-button @click="onClose">
          取消
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import {updateDetailBySelective} from "@/api/material/assets/assetManage";

export default {
  name: 'EditDrawModal',
  props: {
    itemData: {
      type: Object,
      require: true,
      default: () => {
      },
    },
    visible: {
      type: Boolean,
      require: true,
      default: () => false,
    },
    viewMode: {
      type: Boolean,
      require: true,
      default: () => true,
    },
  },
  data() {
    return {
      title: '查看',
      updateLoading: false,
      prodProps:[
        {label: '可调拨', value: 0,disable: false},
        {label: '利旧', value: 1,disable: false},
        {label: '不可调拨', value: 2,disable: false},
        {label: '可调拨/已转资产', value: 3,disable: true}
      ],
      form: {},
      rules: {
        moduleName: [{ required: true, message: '请输入模块名称', trigger: 'blur' }],
        usePart: [{ required: true, message: '请输入用途及所用部位', trigger: 'blur' }],
        productName: [{ required: true, message: '请输入软硬件名称', trigger: 'blur' }],
        brandName: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
        specification: [{ required: true, message: '请输入规格型号及技术参数', trigger: 'blur' }],
        unitName: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        productCount: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        unitPrice: [{ required: true, message: '请输入单价', trigger: 'blur' }],
        assetNature: [{ required: true, message: '请选择资产属性', trigger: 'blur' }]
      },
    };
  },
  methods: {
    onClose() {
      this.$emit('update:visible', false)
    },
    onConfirm() {
      console.log('form=',this.form)
      console.log('viewMode=',this.viewMode)
      if(!this.viewMode && this.form.id){
        this.updateLoading = true
        updateDetailBySelective(this.form).then((res)=>{
          this.updateLoading = false
          if(res.code === '0'){
             this.$message.success('修改成功')
             this.onClose()
          }
        }).catch((e)=>{
          this.$message.success('修改失败，请重试')
          this.updateLoading = false
          this.onClose()
        })
      } else {
        this.onClose()
      }
    },
  },
  watch: {
    itemData: {
      handler:function(newVal) {
        this.form = newVal
        this.form.totalPrice = Number(newVal.productCount * newVal.unitPrice).toFixed(2)
      },
      deep: true
    },
    viewMode:function (newVal,oldVal){
        this.title = newVal ? '查看' : '编辑'
    }
  }
};
</script>

<style scoped>

</style>